{{template "layout/layout_admin.html" .}}

{{define "style"}}

{{end}}
{{define "content"}}

<div class="layui-fluid main" style="margin:15px;">


    <fieldset class="layui-elem-field layui-field-title" style="margin-top:20px;">
        <legend>项目理</legend>
    </fieldset>

    <div class="kit-table">
        <form class="layui-form" lay-filter="kit-search-form">
            <div class="kit-table-header">
                <div class="kit-search-btns">
                    <a href="{{urlfor "ProjectController.AddPj"}}" data-action="add" class="layui-btn layui-btn-sm"><i class="layui-icon">&#xe608;</i> 添加项目</a>
                </div>
                <div class="kit-search-inputs">
                    <div class="kit-search-keyword">
                        <input type="text" class="layui-input" name="keyword" placeholder="搜索关键字.." />
                        <button lay-submit lay-filter="search"><i class="layui-icon">&#xe615;</i></button>
                    </div>
                </div>
            </div>
        </form>
    </div>
    <table id="pj_table" lay-filter="pj_table"></table>

</div>

{{end}}


{{define "script"}}
<script type="text/html" id="tableTool">
    <a class="layui-btn layui-btn-warm layui-btn-xs" lay-event="bind">关联机器</a>
    <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
</script>

<script type="text/html" id="bindMc">
    <form  class="layui-form popform"  action="" method="post" style='margin:10px 10px 0 20px ;'>
        <h1>${info.name}项目</h1>



        <fieldset class="layui-elem-field layui-field-title">
            <legend>选择关联机器</legend>
        </fieldset>
        <input type="hidden" name="project_id" value="${info.id}" >
        <div class="layui-form-item">
            {&each allmc as item, index}

                <input ${item.id|inArray}  type="checkbox" name="bind_mc[]" value="${item.id}" title="${item.username}(${item.ip})" lay-skin="primary">


            {&/each}
        </div>


    </form>
</script>
<script>
var allmc = JSON.parse('{{.alljson}}');
var mcIds = new Array();
var inArray = function(fstr){
    var arr = mcIds
    var i = arr.length;
    while (i--) {
        if (arr[i] == fstr) {
            return "checked";
        }
    }
    return "";
}
juicer.register('inArray', inArray);

layui.use(['jquery','table','form'], function() {
    {{template "layout/baseJs.html" .}}
        var table = layui.table,
                $ = layui.jquery,
                form = layui.form,
                layer = layui.layer,
                laytpl = layui.laytpl;



        table.render({
            elem: '#pj_table'
            ,height: 550
            ,url: '{{urlfor "ProjectController.ListApi"}}' //数据接口
            ,page: true //开启分页
            ,cols: [[ //表头
                {field: 'id', title: 'ID', width:80, sort: true, fixed: 'left'}
                ,{field: 'name', title: '项目名称'}
                ,{field: 'from_path', title: '仓库地址'}
                ,{field: 'account', title: '帐号', width:280}
                ,{field: 'updated_at', title: '最后修改',width:250}
                ,{fixed: 'right', title: '操作', width:250, align:'center', toolbar: '#tableTool'}
            ]]
        });

        //监听工具条
        table.on('tool(pj_table)', function(obj){
            var data = obj.data; //获得当前行数据
            var layEvent = obj.event;
            var tr = obj.tr;

            if(layEvent === 'del'){ //删除

                layer.confirm('确认删除['+data.name+"]?", function(index){
                    obj.del(); //删除对应行（tr）的DOM结构，并更新缓存
                    layer.close(index);

                    var url='{{urlfor "ProjectController.DelPj"}}';
                    layer.load(2);
                    $.ajax({
                        type: "POST",
                        url: url,
                        data: {id:data.id},
                        success: function(json){
                            layer.closeAll('loading');
                            if(json.status != 200){
                                QI.errorAlert(json.info);
                                return false;
                            }
                            QI.successAlert(json.info);
                            //QI.delayJump('');
                        },
                        error:function(e){
                            layer.closeAll('loading');
                            QI.errorAlert('系统出小差了（'+e.statusText+'）');
                        }
                    });


                });
            } else if(layEvent === 'edit'){ //编辑
                location.href='{{urlfor "ProjectController.EditPj"}}?id='+data.id;
            }else if(layEvent === 'bind'){
                layer.load(2);
                $.ajax({
                    type: "GET",
                    url: '{{urlfor "ProjectController.GetBindIp"}}',
                    data: {id:data.id},
                    success: function(bindsInfo){
                        layer.closeAll('loading');

                        mcIds = new Array();
                        if(bindsInfo.data){
                            for (var index in bindsInfo.data){
                                mcIds.unshift((bindsInfo.data)[index].machine_id)
                            }
                        }


                        var tplData = {allmc:allmc,info:data, binds:mcIds};
                        var gettpl = document.getElementById('bindMc').innerHTML;
                        var layHtml = juicer(gettpl, tplData);
                        layer.open({
                            title:'请选择关联的机器',
                            type: 1,
                            skin: 'layui-layer-rim', //加上边框
                            area: ['300px', '350px'], //宽高
                            btn:['确认'],
                            yes: function(index, layero){
                                var params = $('.popform').eq(0).serialize();
                                var url='{{urlfor "ProjectController.BindIp"}}';

                                layer.load(2);
                                $.ajax({
                                    type: "POST",
                                    url: url,
                                    data: params,
                                    success: function(json){
                                        layer.closeAll('loading');
                                        if(json.status != 200){
                                            QI.errorAlert(json.info);
                                            return false;
                                        }
                                        QI.successAlert(json.info);
                                        layer.close(index);
                                    },
                                    error:function(e){
                                        layer.closeAll('loading');
                                        QI.errorAlert('系统出小差了（'+e.statusText+'）');
                                    }
                                });

                            },
                            content: layHtml
                        });
                        form.render();

                    },
                    error:function(e){
                        layer.closeAll('loading');
                        QI.errorAlert('系统出小差了（'+e.statusText+'）');
                    }
                });


            }
        });


    });
</script>

{{end}}
